<template>
    <div>
        <div style="margin-bottom: 10px;">
            <span style="margin-right:5px;">设备</span>
            <ClientSelect v-model="cmd_data.client_id" style="width: 200px;margin-right:15px;"></ClientSelect>
            <span style="margin-right:5px;">命令内容</span>
            <Input v-model="cmd_data.cmd" placeholder="命令内容" style="width: 200px;margin-right:15px;"></Input>
            <span style="margin-right:5px;">执行结果</span>
            <Input v-model="cmd_data.result" placeholder="执行结果" style="width: 200px;margin-right:15px;"></Input>
            <span style="margin-right:5px;">执行状态</span>
            <Select v-model="cmd_data.complete" style="width:100px;margin-right:15px;">
                <Option value="">全部</Option>
                <Option value="0">未执行</Option>
                <Option value="1">执行完毕</Option>
            </Select>
            <Button type="primary" @click="handleCmdsSearch" style="margin-right: 15px;">搜索</Button>
            <Button @click="handleClearCmdsSearch" style="margin-right: 15px;">重置</Button>
        </div>
        <Table border :columns="cmd_data.columns" :data="cmd_data.data" stripe>
            <template #client_id="{ row }">
                <ClientTableCellValue :client_id="row.client_id" />
            </template>
            <template #cmd="{ row }">
                <div>{{ truncateString(row.cmd) }}</div>
            </template>
            <template #result="{ row }">
                <div>{{ truncateString(row.result) }}</div>
            </template>
            <template #status="{ row }">
                <Tag v-if="row.complete == 0">未执行</Tag>
                <Tag v-if="row.complete == 1" color="success">执行完毕</Tag>
            </template>
            <template #time="{ row }">
                <div v-if="row.create_time">下发：{{ row.create_time }}</div>
                <div v-if="row.result_time">回传：{{ row.result_time }}</div>
            </template>
            <template #action="{ row }">
                <CmdInfoButton :data="row" style="margin-right:5px;"></CmdInfoButton>
                <CmdDeleteButton :data="row" @success="handleGetCmds"></CmdDeleteButton>
            </template>
        </Table>
        <Page :total="cmd_data.page_total" size="small" show-elevator show-sizer show-total style="margin-top: 10px;" @on-change="handleCmdPageChange" @on-page-size-change="handleCmdPageSizeChange" />
    </div>
</template>

<script>
import ClientSelect from './ClientSelect.vue';
import ClientTableCellValue from './ClientTableCellValue.vue';
import CmdInfoButton from './CmdInfoButton.vue';
import CmdDeleteButton from './CmdDeleteButton.vue';
import { truncateString } from '@/utils/index.js';

export default {
    name: 'CmdsView',
    components: {
        ClientSelect,
        ClientTableCellValue,
        CmdInfoButton,
        CmdDeleteButton
    },
    data() {
        return {
            cmd_data: {
                cmd_id: 0,
                client_id: '',
                cmd: '',
                result: '',
                complete: null,
                columns: [
                    { title: 'ID', key: 'cmd_id', width: 100, align: 'center' },
                    { title: '设备ID', slot: 'client_id', width: 200, align: 'center' },
                    { title: '命令', slot: 'cmd', align: 'center' },
                    { title: '运行结果', slot: 'result', align: 'center' },
                    { title: '执行状态', slot: 'status', width: 120, align: 'center' },
                    { title: '时间', slot: 'time', width: 220, align: 'center' },
                    { title: '操作', slot: 'action', width: 150, align: 'center' }
                ],
                page_total: 40,
                page_size: 10,
                page_current: 1,
                data: []
            },
        }
    },
    methods: {
        handleCmdsSearch() {
            this.cmd_data.page_current = 1;
            this.handleGetCmds();
        },
        handleClearCmdsSearch() {
            this.cmd_data.cmd_id = '';
            this.cmd_data.client_id = '';
            this.cmd_data.cmd = '';
            this.cmd_data.result = '';
            this.cmd_data.complete = null;
            this.cmd_data.page_current = 1;
            this.handleGetCmds();
        },
        handleCmdPageChange(page_current) {
            this.cmd_data.page_current = page_current;
            this.handleGetCmds();
        },
        handleCmdPageSizeChange(page_size) {
            this.cmd_data.page_size = page_size;
            this.cmd_data.page_current = 1;
            this.handleGetCmds();
        },
        handleGetCmds() {
            var url = '/get_cmds?page_size=' + this.cmd_data.page_size + '&page_current=' + this.cmd_data.page_current;
            if (this.cmd_data.cmd_id) {
                url += '&cmd_id=' + encodeURIComponent(this.cmd_data.cmd_id);
            }
            if (this.cmd_data.client_id) {
                url += '&client_id=' + encodeURIComponent(this.cmd_data.client_id);
            }
            if (this.cmd_data.cmd) {
                url += '&cmd=' + encodeURIComponent(this.cmd_data.cmd);
            }
            if (this.cmd_data.result) {
                url += '&result=' + encodeURIComponent(this.cmd_data.result);
            }
            if (this.cmd_data.complete != null) {
                url += '&complete=' + encodeURIComponent(this.cmd_data.complete);
            }
            this.$http.get(url).then(res => {
                this.cmd_data.page_total = res.page_total;
                this.cmd_data.data = res.data;
            });
        },
        truncateString(content) {
            return truncateString(content);
        }
    },
    created() {
        this.handleGetCmds();
    }
}
</script>